<template>
  <div class="login">
    <form class="loginForm" @submit.prevent="subForm(formData)">
      <p><img src="../assets/img/logo.png" style="width: 70px;" alt=""><span class="login_title">小蜂修平台系统</span></p>
      <input type="text" class="form-control" v-model="formData.loginName" placeholder="用户名" required>
      <input type="password" class="form-control" v-model="formData.loginPwd" placeholder="密码" required>
      <button type="submit" class="btn pmd-ripple-effect btn-block btn-warning">登录</button>
    </form>
  </div>
</template>
<script>
  export default {
    name: 'login',
    data () {
      return {
        formData: {
          loginName: '',
          loginPwd: ''
        },
      }
    },
    methods: {
      subForm: function (item, event) {
//        console.log('loginName:' + item.loginName, '\n' + 'loginPwd:' + item.loginPwd);
        let data = {
          "currentSystem": "0",
          "username": item.loginName,
          "password": item.loginPwd
        };
        this.$axios({
          url: '/weblogin',
          method: 'POST',
          data: data
        }).then(res => {
          this.store.loginInfo = res;
          this.$router.push({name: 'workOrderList'});
        })
          .catch(error => {
//            console.log(error);
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../assets/commn/commn.scss";

  .login {
    width: 100%;
    min-height: $height;
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    .loginForm {
      width: 350px;
      padding: 0 30px;
      .login_title {
        font-size: 30px;
        font-weight: 700;
      }
      input {
        width: 100%;
        height: 45px;
        margin-bottom: 15px;
      }
      button {
        height: 45px;
        color: #fff;
        font-size: 16px;
        background-color: rgba(245, 126, 0, 1);
      }
    }
  }
</style>
